<template>
  <!-- 采集站选择器，弹出查询对话框选择采集站的方式  -->
  <div class="topnav-content">
    <Input search v-model="srhValue" @on-search="search" :placeholder="$t('select_storage')" />
    <Modal v-model="selectModel"  :loading="modalLoading" :title="$t('select_storage')" width="800px" @on-ok="modelOk"  @on-cancel="modelCancel"> <!-- footer-hide="false" -->
      <Row :gutter="4">
        <Col span="5"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="5"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
        <Col span="5">
          <OrganizationTree ref="edtOrgSelect"
                            width="200px"
                            v-model="queryParam.where.orgId"
                            prop="orgId">

          </OrganizationTree>

<!--          <Orgselect ref="organization" width="200px"/>-->

        </Col>
        <Col span="5">
          <Select v-model="queryParam.where.type" >
            <Option v-for="item in siteType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="1"><Button type="primary" icon="ios-search" @click="search">{{$t('search')}}</Button></Col>
      </Row>
      <Card>
        <Table border :columns="columns" :data="tableData" @on-row-click="rowClick">
          <template slot-scope="{ row, index }" slot="select">
            <Button type="default" size="small" @click="selClick(row,index)">{{$t('select')}}</Button>
          </template>
          <template slot-scope="{ row, index }" slot="type">
            <span v-if="row.type===1" style="color: green" >{{$t('collect_site')}}</span>
            <span v-if="row.type===2" style="color: #ed4014" >{{$t('storage_server')}}</span>
          </template>
        </Table>
        <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
<!--        <Page class="panel-page" :total="queryParam.page.total" :current="queryParam.page.pages" :page-size="queryParam.page.size" @on-change="changePage" show-elevator show-sizer show-total />-->
      </Card>
    </Modal>
  </div>
</template>
<script>
import {queryPage} from '@/api/site';
import {apiResult} from "@/libs/util";
import OrganizationTree from '@/components/topnav/OrganizationTree';
import TopnavPage from '_c/topnav/TopnavPage'
export default {
  name: 'SiteModelSelect',
  components: {OrganizationTree,TopnavPage},
  computed:{
    siteType(){
      return[
        {value:0,label:this.$t('all')},
        {value:1,label:this.$t('collect_site')},
        {value:2,label:this.$t('storage_server')}]
    },
    columns(){
      return [
        {title: this.$t('select'), key: 'action', width: 100,slot: 'select'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 175},
        {title: this.$t('name'), key: 'name', sortable: true, ellipsis:true,width: 200},
        {title: this.$t('type'), key: 'type', sortable: true, slot: 'type',width: 150},
        {title: 'IP', key: 'ip', sortable: true, width: 200}]
    }
  },
  props: {
    placeholder: {type: String,default: ""},
    /*selectValue: {type: Object,default: () => null},*/
    selectValue: {type: Number},
    //srhValue: {type: String}, //显示siteName在搜索框内
  },
  // v-model
  model:{
    prop: 'selectValue',//返回值
    event: "dataChange" //触发此事件返回值
  },
  data(){
    return {

      selectModel:false,
      modalLoading:false,
      modelWidth:600,
      srhValue:null,
      tableData:[],
      queryParam:{
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 10,
          total: 0,
          current: 1,
        },
        where:{
          code:null,
          name:null,
          type:null,
          orgId:null,
        }
      },

    }
  },
  methods:{
    modelOk(){
      this.modalLoading = false;
      setTimeout(() => {
        this.modalLoading = true;
        this.addModal = true;
      }, 1000);
    },
    modelCancel(){
      this.srhValue = null;
      this.$emit('dataChange', null);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', null);
    },
    search(){
      /** 生成查询条件 */
/*      console.log(this.srhValue);
      this.queryParam.where.code=this.srhValue;
      this.queryParam.where.name=this.srhValue;*/
/*      this.queryParam.page.current = this.queryParam.page.pages * this.queryParam.page.size;
      this.queryParam.where.orgId = this.$refs.organization.getValue();*/
      if (this.queryParam.where.type === 0){
        this.queryParam.where.type = null;
      }
      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
          apiResult(res.data,false,result=>{
            this.tableData = result.data.records;
            this.queryParam.where.code=null;
            this.queryParam.where.name=null;
          });
      })
      this.modalLoading = false;
      this.selectModel=true;
    },
    changePage(){this.search()},
    selClick(row,index){
      this.rowClick(row,index);
    },
    rowClick(row,index){
      console.log(row);
      this.selectModel = false;
      this.srhValue = row.code;
      /** 会row 数据传给 selectValue，给父元素的v-model*/
      this.$emit('dataChange', row.id);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', row);
    }
  },
  mounted(){
  }
}
</script>
<style lang="less">
@import "./topnav";
</style>
